<template>
	<div class="zyCommonWrapper" v-show="!$route.meta.ishideMenu">
		<!--头部导航-->
		<div class="zyHeaderWrapper">
			<div class="zyHeader">
				<div class="rightInfo clear">
					<!-- <Dropdown class="historyItem">
            <div @click="toggleTheme" class="theme-color">
              <i v-if="themeColor" class="iconfont zy-common-qianse"></i>
              <i v-else class="iconfont zy-common-shense"></i>
            </div>
          </Dropdown> -->
					<Dropdown class="historyItem">
						<div class="notice" @click="systemNotice">
							<Icon type="md-notifications-outline" style="font-size: 22px" />
							<span class="count" v-if="noticeTotal">{{ noticeTotal }}</span>
						</div>
					</Dropdown>
					<Dropdown class="historyItem download-qr" v-if="appName || appName1">
						<div class="droptitle">
							<span class="con">{{ $t('common.PDADownload') }}</span>
						</div>
						<DropdownMenu slot="list">
							<DropdownItem name="editPassword">
								<!-- pda -->
								<div style="text-align: center" class="name" v-if="appName">
									{{ appName }}
								</div>
								<vue-qr :text="appCode" :size="200" v-if="appName"></vue-qr>
								<!-- app -->
								<div style="text-align: center" v-if="appName1">
									{{ appName1 }}
								</div>
								<vue-qr :text="appCode1" :size="200" v-if="appName1"></vue-qr>
							</DropdownItem>
						</DropdownMenu>
					</Dropdown>
					<!-- <Dropdown class="historyItem" @on-click="switchLanguage">
            <div class="droptitle">
              <span class="con">{{ langName }}</span>
              <i class="newMenuxiangxia iconfont down"></i>
            </div>
            <DropdownMenu slot="list">
              <DropdownItem name="zh_CN">
                <span class="con">简体中文</span>
              </DropdownItem>
              <DropdownItem name="en_US">
                <span class="con">English</span>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown> -->
					<Dropdown class="historyItem" @on-click="systemoperation">
						<div class="droptitle">
							<div class="userImg"></div>
							<span class="con">{{ userName }}</span>
							<i class="newMenuxiangxia iconfont down"></i>
						</div>
						<DropdownMenu slot="list">
							<!--              <DropdownItem name="signOut" @click.native="showSignatureModal">-->
							<!--                <span class="con" >{{$t('签名')}}</span>-->
							<!--              </DropdownItem>-->
							<DropdownItem name="editPassword">
								<!-- editPassword -->
								<span class="con">{{ $t('common.ediPass') }}</span>
							</DropdownItem>
							<DropdownItem name="signOut" @click.native="logOut">
								<span class="con">{{ $t('common.logOut') }}</span>
							</DropdownItem>
						</DropdownMenu>
					</Dropdown>
				</div>
				<header class="logo">
					<span class="logoBox">
						<!-- <img src="~images/hx-logo.jpg" alt="logo"> -->
						<img src="~images/hx-logo.png" alt="logo" />
					</span>
				</header>
				<ul class="fistMenu clear">
					<li
						class="item"
						v-for="(item, index) in showfirstMenu"
						:class="{ active: firstIndex === index }"
						:key="index"
						@click="selectfirstMenu(index, item)"
					>
						<i class="iconfont" v-if="item.menuIcon.indexOf('#') === -1" :class="item.menuIcon"></i>
						<i class="newMenumoren iconfont" v-else></i>
						<span class="con">{{ item.menuName }}</span>
					</li>
					<Dropdown class="moreItem" @on-click="moreSelect" v-show="moreMenu.length > 0 && moreBtn === ''">
						<div class="droptitle">
							<!--              <i class="newMenugengduo1 iconfont leftIcon"></i>-->
							<span class="con">
								<!--                {{$t('common.more')}}-->
								<i class="iconfont zy-common-gengduo1 down"></i>
							</span>
							<!--              <i class="newMenuxiangxia iconfont down"></i>-->
						</div>
						<DropdownMenu slot="list" class="list">
							<DropdownItem v-for="(item, index) in moreMenu" :name="index" :key="index">
								<i class="iconfont leftIcon" v-if="item.menuIcon.indexOf('#') === -1" :class="item.menuIcon"></i>
								<i class="newMenumoren iconfont leftIcon" v-else></i>
								<span class="con">{{ item.menuName }}</span>
								<i class="iconfont newMenuright rightIcon"></i>
							</DropdownItem>
						</DropdownMenu>
					</Dropdown>
				</ul>
			</div>
		</div>
		<!--左侧导航-->
		<div class="zySidebarWrapper" :class="{ menuAnimate: animate }" v-show="secondMenu.length > 0">
			<div class="zySidebar">
				<div
					class="subItem"
					v-for="(item, index) in secondMenu"
					:key="index"
					:class="{ open: item.open, active: secondIndex === index }"
					@click.stop="selectsecondMenu(index, item)"
				>
					<div class="content" :class="{ single: item.childrenMenus.length === 0 }">
						<i class="iconfont iconLeft" v-if="item.menuIcon.indexOf('#') === -1" :class="item.menuIcon"></i>
						<i class="newMenumoren iconfont iconLeft" v-else></i>
						<span class="con" :title="item.menuName && item.menuName.length > 7 ? item.menuName : ''">{{ item.menuName }}</span>
						<i class="newMenuright iconfont arrow" v-if="item.childrenMenus.length > 0"></i>
					</div>
					<ul class="childMenu" v-show="item.childrenMenus.length > 0">
						<li
							v-for="(val, i) in item.childrenMenus"
							:key="i"
							:class="{ active: index === secondIndex && i === thirdIndex }"
							@click.stop="selectthirdMenu(i, val, index)"
						>
							<span class="thirdItem" :title="val.menuName && val.menuName.length > 11 ? val.menuName : ''">{{ val.menuName }}</span>
						</li>
					</ul>
				</div>
			</div>
			<div class="zyMinSidebar">
				<!-- <div
                 class="iconWrap"
                 v-for="(item, index) in secondMenu"
                 :key="index"
                 :class="{'active': secondIndex === index}"
                 @click.stop="minSelectsecondMenu(index, item)"
               >
                 <div v-if="!(Array.isArray(item.childrenMenus) && item.childrenMenus.length > 0)">
                   <i class="iconfont" v-if="item.menuIcon.indexOf('#') === -1" :class="item.menuIcon"></i>
                   <i class="newMenumoren iconfont iconLeft" v-else></i>
                 </div>
                 <div v-else>
                   <Poptip trigger="hover" placement="bottom-start">
                       <i class="iconfont" v-if="item.menuIcon.indexOf('#') === -1" :class="item.menuIcon"></i>
                       <i class="newMenumoren iconfont iconLeft" v-else></i>
                     <div class="children-menu" slot="content">
                       <ul>
                         <li v-for="(m,i) in item.childrenMenus" @click.stop="selectthirdMenu(i, m, index)" :class="{'active': index === secondIndex && i === thirdIndex}" :key="i">{{m.menuName}}</li>
                       </ul>
                     </div>
                   </Poptip>
                 </div>
               </div> -->
				<div v-for="(item, index) in secondMenu" :key="index">
					<div
						class="iconWrap"
						:class="{ active: secondIndex === index }"
						@click.stop="minSelectsecondMenu(index, item)"
						v-if="!(Array.isArray(item.childrenMenus) && item.childrenMenus.length > 0)"
					>
						<i class="iconfont" v-if="item.menuIcon.indexOf('#') === -1" :class="item.menuIcon"></i>
						<i class="newMenumoren iconfont iconLeft" v-else></i>
					</div>
					<div v-else>
						<Poptip trigger="hover" placement="bottom-start">
							<div class="iconWrap" :class="{ active: secondIndex === index }">
								<i class="iconfont" v-if="item.menuIcon.indexOf('#') === -1" :class="item.menuIcon"></i>
								<i class="newMenumoren iconfont iconLeft" v-else></i>
							</div>
							<div class="children-menu" slot="content">
								<ul>
									<li
										v-for="(m, i) in item.childrenMenus"
										@click.stop="selectthirdMenu(i, m, index)"
										:class="{
											active: index === secondIndex && i === thirdIndex,
										}"
										:key="i"
									>
										{{ m.menuName }}
									</li>
								</ul>
							</div>
						</Poptip>
					</div>
				</div>
			</div>
			<Button @click="slideAnimate" class="shrinkBtn" long>
				<i class="iconfont zy-common-shouqi1" :class="{ animate: animate }"></i>
			</Button>
		</div>
		<div class="currentLocation" v-if="!$route.meta.isNotFound">
			<!--      <i class="iconfont newMenushouye"></i>-->
			<!--      <em>{{$t('common.curLoc')}}:</em>-->
			<div class="item" v-for="(item, index) in currentLocation" :key="index">
				<span v-if="index !== currentLocation.length - 1">
					<a href="javaScript:void(0);" @click.stop="clickLocation(item)">{{ item.menuName }}</a>
					<em class="iconfont zy-common-jiantou-copy"></em>
				</span>
				<span v-else>
					<a href="javaScript:void(0);" class="currentPageLocation" @click.stop="clickLocation(item)">{{ item.menuName }}</a>
				</span>
			</div>
		</div>
		<password ref="passwordRefs"></password>
		<signature ref="signature" />
	</div>
</template>

<script>
import store from '@/store/store';
import { Title } from '@/store/types';
import signature from '@/views/devBasic/capex/components/signature.vue';
import Vue from 'vue';
import vueQr from 'vue-qr';
import password from '../views/login/password';
import menuData2 from './menudata';
const isTong = process.env.NODE_ENV === 'tong';
let ksiot = '';
if (isTong) {
	ksiot = '';
}
export default {
	name: 'commonHeader',
	components: { password, vueQr, signature },
	data() {
		return {
			noticeTotal: 0,
			afterContent: '12',
			fontWidth: this.$i18n.locale === 'zh_CN' ? 16 : 8,
			menuData: [],
			firstIndex: '',
			secondIndex: '',
			thirdIndex: '',
			secondMenu: [],
			thirdMenu: [],
			secondShow: true,
			currentLocation: [],
			userName: '',
			logoBg: {},
			animate: false,
			regularUseMenu: [], //经常使用的菜单
			showMenuNum: 5, //展示一级菜单个数
			showTop: false,
			hierarchyName: '',
			appCode: '',
			appName: '',
			imageUrl: require('../assets/images/icon.jpg'),
			appCode1: '',
			appName1: '',
			menuArr: [],
			menuArrTemp: [],
			moreBtn: '',
			diskTotal: 0,
			diskUsed: 0,
			isShowDisk: false,
			langName: '',
			themeColor: false,
		};
	},
	created() {
		this.getIcon();
		this.getHcodeAndbtn();
		window.localStorage.removeItem('ziyunPortalMenu');
		this.moreBtn = window.localStorage.getItem('KaPortalJumpMenu');
		this.queryMenu();
		window.addEventListener('resize', () => {
			this.rearrange();
		});
		const appEl = document.getElementById('app');
		if (window.localStorage.getItem('language') == 'en_US') {
			this.langName = 'English';
			appEl.classList.add('en_US');
		} else if (window.localStorage.getItem('language') == 'zh_CN') {
			this.langName = '简体中文';
			appEl.classList.add('zh_CN');
		}
		// this.getNoticeTotal();
		// this.myInterval = setInterval(() => {
		// 	this.getNoticeTotal();
		// }, 1000 * 60);
	},
	// mounted() {
	//   this.queryMenu()
	//   window.addEventListener('resize', () => {
	//     this.rearrange()
	//   })
	//   if(window.localStorage.getItem('language')=='en_US'){
	//     this.langName = 'English'
	//   }else if(window.localStorage.getItem('language')=='zh_CN'){
	//     this.langName = '简体中文'
	//   }
	// },
	methods: {
		getNoticeTotal() {
			this.axios({
				method: 'get',
				url: '/dms/messageWarning/queryTotalUnread',
			}).then((res) => {
				this.noticeTotal = res.data;
			});
		},
		systemNotice() {
			this.$router.push({ path: '/systemNotice' });
		},
		showSignatureModal() {
			this.$refs.signature.showModal();
		},
		toggleTheme() {
			this.themeColor = !this.themeColor;
			const appEl = document.getElementById('app');
			if (!this.themeColor) {
				appEl.classList.add('theme-light');
				appEl.classList.remove('theme-dark');
			} else {
				appEl.classList.remove('theme-light');
				appEl.classList.add('theme-dark');
			}
		},
		getIcon() {
			window.localStorage.removeItem('app_download_url_waiwang');
			window.localStorage.removeItem('app_qrname_waiwang');
			window.localStorage.removeItem('mapp_download_url_waiwan');
			window.localStorage.removeItem('tv_qrname_waiwang');
			this.axios({
				method: 'get',
				url: '/basic/sys/getSysConfig',
				params: {},
			}).then((res) => {
				if (res.code === 200) {
					if (res.data) {
						for (let item of res.data) {
							if (item.configCode == 'app_download_url_waiwang') {
								window.localStorage.setItem('app_qrname_waiwang', item.configName);
							}

							if (item.configCode == 'mapp_download_url_waiwan') {
								window.localStorage.setItem('tv_qrname_waiwang', item.configName);
							}

							window.localStorage.setItem(item.configCode, item.configVal);
						}

						//this.imageUrl = window.localStorage.getItem("company_icon");
					}
					this.appCode = window.localStorage.getItem('app_download_url_waiwang');
					this.appName = window.localStorage.getItem('app_qrname_waiwang');
					this.appCode1 = window.localStorage.getItem('mapp_download_url_waiwan');
					this.appName1 = window.localStorage.getItem('tv_qrname_waiwang');
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		getHcodeAndbtn() {
			this.axios({
				method: 'get',
				url: '/basic/menu/findPermissionByToken',
				params: {},
			}).then((res) => {
				if (res.code === 200) {
					window.localStorage.setItem('USER_URI', JSON.stringify(res.data));
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		switchLanguage(name) {
			this.$i18n.locale = name;
			if (name == 'en_US') {
				this.langName = 'English';
			} else if (name == 'zh_CN') {
				this.langName = '简体中文';
			}
			window.localStorage.setItem('language', name);
			window.location.reload();
		},
		forMethod(data) {
			for (let i = 0; i < data.length; i++) {
				data[i].description = this.langName === '简体中文' ? data[i].name : data[i].enName;
				data[i].menuName = this.langName === '简体中文' ? data[i].name : data[i].enName;
				data[i].menuUrl = data[i].url;
				if (data[i].children.length > 0) {
					data[i].childrenMenus = data[i].children;
					this.forMethod(data[i].children);
				} else {
					data[i].childrenMenus = [];
				}
			}
		},
		queryMenu() {
			this.userName = window.localStorage.getItem('ziyunFactoryPortalName');
			this.axios({
				method: 'get',
				url: '/basic/menu/findMenuByToken',
				params: {
					menuType: 1,
				},
			}).then((res) => {
				if (res.code === 200) {
					this.menuArr = res.data.map((item) => {
						return this.langName === '简体中文' ? item.name : item.enName;
					});
					this.rearrange();
					// 二级菜单的parentId = 2202, 三级菜单的arentId = 12
					for (let i = 0; i < res.data.length; i++) {
						res.data[i].createBy = 'ZY000036915337';
						res.data[i].description = this.langName === '简体中文' ? res.data[i].name : res.data[i].enName;
						res.data[i].globalUniqueId = 'ZY000036915337';
						res.data[i].id = 'ZY000036915337';
						res.data[i].isPresent = 0;
						res.data[i].menuIcon = res.data[i].icon;
						res.data[i].menuName = this.langName === '简体中文' ? res.data[i].name : res.data[i].enName;
						res.data[i].menuOrder = 2;
						res.data[i].menuUrl = '###';
						res.data[i].updateBy = 'ZY000036915337';
						// res.data[i].childrenMenus = res.data[i].children;
						if (res.data[i].children.length > 0) {
							res.data[i].childrenMenus = res.data[i].children;
							this.forMethod(res.data[i].children);
						} else {
							res.data[i].childrenMenus = [];
						}
					}
					res.data.forEach((item) => {
						item.childrenMenus.forEach((ele) => {
							ele.createBy = 'ZY000036915337';
							ele.globalUniqueId = 'shebeitaizhang';
							ele.id = 2152;
							ele.isPresent = 0;
							ele.menuIcon = ele.icon;
							ele.menuOrder = 1;
							ele.parentId = 2202;
							if (ele.childrenMenus && ele.childrenMenus.length) {
								ele.childrenMenus.forEach((m) => {
									m.createBy = 'ZY000036915337';
									m.globalUniqueId = 'shebeitaizhang';
									m.id = 2152;
									m.isPresent = 0;
									m.menuIcon = m.icon;
									m.menuOrder = 1;
									m.parentId = 12;
								});
							}
						});
					});
					this.compareMenu(res.data);
					this.initMenu();
				}
			});
		},
		compareMenu(data) {
			//对比本地菜单，看一级菜单是否已被更改
			let localMenuStr = localStorage.getItem('ziyunPortalMenu');
			let localMenu = [],
				isReset = false;
			if (localMenuStr && localMenuStr !== 'null') {
				localMenu = JSON.parse(localMenuStr);
			}
			for (let i = 0; i < data.length; i++) {
				let item = data[i];
				let isUpdate = true;
				for (let j = 0; j < localMenu.length; j++) {
					let val = localMenu[j];
					if (item.name === val.name) {
						isUpdate = false;
						localMenu[j] = item;
					}
				}
				if (isUpdate) {
					// false 说明本地有个菜单，已经不存在，直接展示接口最新菜单
					isReset = true;
					break; //跳出循环
				}
			}
			if (isReset) {
				this.menuData = menuData2;
			} else {
				this.menuData = localMenu;
			}
		},
		cyclicTraversal() {
			// 根据路由循环遍历
			let route = this.$route.path;
			let pathname = this.currentPathName();
      if(route === '/saleGoodsManage/'){ // 仓储那个项目是hash路由
        route = this.$route.fullPath
      }
			outer: for (let i = 0; i < this.menuData.length; i++) {
				if (this.menuData[i].menuUrl.replace(pathname, '/') === route) {
					this.firstIndex = i;
					window.localStorage.setItem('ziyunMenuFirstLevel', i);
					window.localStorage.setItem('ziyunMenuSecondLevel', null);
					window.localStorage.setItem('ziyunMenuthirdLevel', null);
					break outer;
				}
				var item = this.menuData[i].childrenMenus;
				for (let j = 0; j < item.length; j++) {
					if (item[j].menuUrl.replace(pathname, '/') === route) {
						this.firstIndex = i;
						this.secondIndex = j;
						window.localStorage.setItem('ziyunMenuFirstLevel', i);
						window.localStorage.setItem('ziyunMenuSecondLevel', j);
						window.localStorage.setItem('ziyunMenuthirdLevel', null);
						break outer;
					}
					var val = item[j].childrenMenus;
					for (let k = 0; k < val.length; k++) {
						if (val[k].menuUrl.replace(pathname, '/') === route) {
							this.firstIndex = i;
							this.secondIndex = j;
							this.thirdIndex = k;
							window.localStorage.setItem('ziyunMenuFirstLevel', i);
							window.localStorage.setItem('ziyunMenuSecondLevel', j);
							window.localStorage.setItem('ziyunMenuthirdLevel', k);
							break outer;
						}
					}
				}
			}
		},
		clickLocation(item) {
			if (item.menuUrl.indexOf('##') > -1) {
				return false;
			}
			let pathname = this.currentPathName();
			if (item.menuUrl.indexOf(pathname) !== -1) {
				// 本项目用路由跳转
				let { menuName, menuIcon, menuUrl } = item;
				this.updataRegularUseMenu({ menuName, menuIcon, menuUrl });
				let path = item.menuUrl;
				path = path.replace(pathname, '/');
				this.$router.push({ path: path });
			} else {
				let { menuName, menuIcon, menuUrl } = item;
				this.updataRegularUseMenu({ menuName, menuIcon, menuUrl });
				setTimeout(() => {
					window.location.href = item.menuUrl;
				}, 500);
			}
		},
		initMenu() {
			let zyCon = document.querySelector('.zy-content');
			if (zyCon) {
				let currLocation = document.querySelector('.currentLocation');
				currLocation.classList.add('zy-currentLocation');
			}
			this.cyclicTraversal();
			this.secondShow = false;
			if (!String(this.firstIndex)) {
				// 当前页面不在菜单里 可能是详情页 从缓存中获取父级菜单
				let firstIndex = window.localStorage.getItem('ziyunMenuFirstLevel');
				if (!firstIndex) {
					firstIndex = 'null';
				}
				this.firstIndex = Number(firstIndex);
				if (isNaN(this.firstIndex)) {
					this.firstIndex = 'null';
				}
				let secondIndex = window.localStorage.getItem('ziyunMenuSecondLevel');
				if (!secondIndex) {
					secondIndex = 'null';
				}
				this.secondIndex = Number(secondIndex);
				if (isNaN(this.secondIndex)) {
					this.secondIndex = 'null';
				}
				let thirdIndex = window.localStorage.getItem('ziyunMenuthirdLevel');
				if (!thirdIndex) {
					thirdIndex = 'null';
				}
				this.thirdIndex = Number(thirdIndex);
				if (isNaN(this.thirdIndex)) {
					this.thirdIndex = 'null';
				}
			}
			this.generateCurrentLocation();
			// 二级 菜单
			if (!String(this.firstIndex) || this.firstIndex === 'null') {
				// 不存在一级菜单时，全屏展示
				setTimeout(() => {
					let zyCon = document.querySelector('.zy-content');
					let currentLoca = document.querySelector('.zy-currentLocation');
					if (zyCon) {
						zyCon.classList.add('conAnimateBack');
					}
					if (currentLoca) {
						currentLoca.classList.add('currentLocationAnimateBack');
					}
				}, 500);
				return false;
			}
			if (this.menuData[this.firstIndex].childrenMenus.length === 0) {
				// 不存在二级菜单时，全屏展示
				setTimeout(() => {
					let zyCon = document.querySelector('.zy-content');
					let currentLoca = document.querySelector('.zy-currentLocation');
					if (zyCon) {
						zyCon.classList.add('conAnimateBack');
					}
					if (currentLoca) {
						currentLoca.classList.add('currentLocationAnimateBack');
					}
				}, 500);
				return false;
			}
			this.secondMenu = this.menuData[this.firstIndex].childrenMenus;
			this.secondShow = true;
			// 三级菜单
			if (!String(this.secondIndex) && this.secondIndex === 'null') {
				return false;
			}
			this.menuData[this.firstIndex].childrenMenus[this.secondIndex].open = true; // 默认展开
			this.thirdMenu = this.menuData[this.firstIndex].childrenMenus[this.secondIndex].childrenMenus;

			this.$nextTick(() => {
				let zyCon = document.querySelector('.zy-content');
				if (zyCon && this.animate) {
					zyCon.classList.add('conAnimateBack');
				}
			});
		},
		generateCurrentLocation() {
			//生成当前位置
			if (this.menuData.length === 0) {
				return false;
			}
			this.currentLocation = [];
			if (String(this.firstIndex) && this.firstIndex !== 'null') {
				let obj1 = {};
				obj1.menuUrl = this.menuData[this.firstIndex].menuUrl;
				obj1.menuName = this.menuData[this.firstIndex].menuName;
				this.currentLocation.push(obj1);
				if (String(this.secondIndex) && this.secondIndex !== 'null') {
					let firstData = this.menuData[this.firstIndex].childrenMenus;
					if (firstData[this.secondIndex]) {
						let obj2 = {};
						obj2.menuUrl = firstData[this.secondIndex].menuUrl;
						obj2.menuName = firstData[this.secondIndex].menuName;
						this.currentLocation.push(obj2);
						if (String(this.thirdIndex) && this.thirdIndex !== 'null') {
							let secondData = firstData[this.secondIndex].childrenMenus;
							if (secondData[this.thirdIndex]) {
								let obj3 = {};
								obj3.menuUrl = secondData[this.thirdIndex].menuUrl;
								obj3.menuName = secondData[this.thirdIndex].menuName;
								this.currentLocation.push(obj3);
							}
						}
					}
				}
			}

			if (Array.isArray(this.currentLocation) && this.currentLocation.length > 0) {
				store.commit(Title, this.currentLocation[this.currentLocation.length - 1].menuName);
			}
		},
		currentPathName() {
			let arr = window.location.href.replace(window.location.origin, '').split('/');
			if (arr.length > 1) {
				return isTong ? '/' + arr[1] + '/' : '/' + arr[2] + '/';
			} else {
				return '';
			}
		},
		selectfirstMenu(index, item) {
			this.closeSecondMenu(0);
			this.firstIndex = index;
			this.secondMenu = this.menuData[index].childrenMenus;
			this.thirdMenu = [];
			this.secondIndex = 'null';
			this.thirdIndex = 'null';
			let pathname = this.currentPathName();
			if (item.menuUrl && item.menuUrl.indexOf('##') === -1) {
        if(item.menuUrl.indexOf('windowType=dataBoard') !== -1){
          // 新窗口打开，全屏
          window.open(item.menuUrl, '_blank')
        } else if (item.menuUrl.indexOf(pathname) !== -1) {
					// 本项目用路由跳转
					let { menuName, menuIcon, menuUrl } = item;
					this.updataRegularUseMenu({ menuName, menuIcon, menuUrl });
					let path = item.menuUrl;
					path = path.replace(pathname, '/');
					this.$router.push({ path: path });
				} else {
					let { menuName, menuIcon, menuUrl } = item;
					this.updataRegularUseMenu({ menuName, menuIcon, menuUrl });
					setTimeout(() => {
						window.location.href = ksiot + item.menuUrl;
					}, 500);
				}
			} else {
				// 默认展开下级
				if (this.secondMenu.length === 0) {
					return false;
				}
				let secondeUrl = this.secondMenu[0].menuUrl;
				this.secondIndex = 0;
				this.thirdMenu = this.menuData[this.firstIndex].childrenMenus[0].childrenMenus;
				if (secondeUrl && secondeUrl.indexOf('##') === -1) {
					if (secondeUrl.indexOf('dncManage') != -1) {
						this.isShowDisk = true;
					} else {
						this.isShowDisk = false;
					}
					this.selectsecondMenu(0, this.secondMenu[0]);
				} else {
					//展开第三级
					if (this.thirdMenu.length === 0) {
						return false;
					}
					let threeUrl = this.thirdMenu[0].menuUrl;
					if (threeUrl.indexOf('dncManage') != -1) {
						this.isShowDisk = true;
					} else {
						this.isShowDisk = false;
					}
					if (threeUrl && threeUrl.indexOf('##') === -1) {
						this.selectthirdMenu(0, this.thirdMenu[0], 0);
					}
				}
			}
			this.generateCurrentLocation();
		},
		closeSecondMenu(_index) {
			this.secondMenu.forEach((item, index) => {
				if (_index != index) item.open = false;
			});
		},
		selectsecondMenu(index, item, isOpen) {
			//isOpen 点击缩小的二级菜单，默认展开三级菜单
			if (item.hasOwnProperty('open')) {
				item.open = !item.open;
			} else {
				item.open = true;
			}
			if (isOpen) {
				item.open = true;
			}

			this.closeSecondMenu(index);

			let pathname = this.currentPathName();
			if (item.menuUrl && item.menuUrl.indexOf('##') === -1) {
        if(item.menuUrl.indexOf('windowType=dataBoard') !== -1){
          // 新窗口打开，全屏
          window.open(item.menuUrl, '_blank')
        } else if (item.menuUrl.indexOf(pathname) !== -1) {
					let { menuName, menuIcon, menuUrl } = item;
					this.updataRegularUseMenu({ menuName, menuIcon, menuUrl });
					let path = item.menuUrl;
					path = path.replace(pathname, '/');
					this.$router.push({ path: path });
				} else {
					let { menuName, menuIcon, menuUrl } = item;
					this.updataRegularUseMenu({ menuName, menuIcon, menuUrl });
          this.$router.push({ path: ksiot + item.menuUrl });
					// window.location.href = ksiot + item.menuUrl;
				}
			}
			this.generateCurrentLocation();
			this.$forceUpdate();
		},
		selectthirdMenu(index, item, secondeIndex) {
			this.$store.commit('detail/SET_CALEND', '');
			this.thirdIndex = index;
			this.secondIndex = secondeIndex;
			let pathname = this.currentPathName();
      if(item.menuUrl.indexOf('windowType=dataBoard') !== -1){
        // 新窗口打开，全屏
        window.open(item.menuUrl, '_blank')
      } else if (item.menuUrl.indexOf(pathname) !== -1) {
				let { menuName, menuIcon, menuUrl } = item;
				this.updataRegularUseMenu({ menuName, menuIcon, menuUrl });
				let path = item.menuUrl;
				path = path.replace(pathname, '/');
				this.$router.push({ path: path });
			} else {
				let { menuName, menuIcon, menuUrl } = item;
				this.updataRegularUseMenu({ menuName, menuIcon, menuUrl });
				window.location.href = ksiot + item.menuUrl;
			}
			this.generateCurrentLocation();
		},
		minSelectsecondMenu(index, item) {
			this.closeSecondMenu(index);
			//点击缩小的二级菜单
			this.selectsecondMenu(index, item, true);
			// this.slideAnimate()
		},
		slideAnimate() {
			this.animate = !this.animate;
			let zyCon = document.querySelector('.zy-content');
			let currentLoca = document.querySelector('.zy-currentLocation');
			if (this.animate) {
				if (zyCon) {
					zyCon.classList.add('conAnimateBack');
				}
				if (currentLoca) {
					currentLoca.classList.add('currentLocationAnimateBack');
				}
			} else {
				if (zyCon) {
					zyCon.classList.remove('conAnimateBack');
				}
				if (currentLoca) {
					currentLoca.classList.remove('currentLocationAnimateBack');
				}
			}
		},
		widthCalc(pmwidth, menuwidth) {
			if (this.menuArrTemp.length > 0)
				if (pmwidth > menuwidth) {
					if (pmwidth > menuwidth + this.menuArrTemp.slice(-1)[0].length * this.fontWidth + 69) {
						this.showMenuNum = this.menuArrTemp.length;
					} else {
						this.showMenuNum = this.menuArrTemp.length - 1;
					}
					return false;
				} else {
					this.widthCalc(pmwidth, menuwidth - (this.menuArrTemp.pop().length * this.fontWidth + 69));
				}
		},
		rearrange() {
			//  窗口变化，重新排列一级菜单
			let width = document.documentElement.clientWidth || document.body.clientWidth;
			this.menuArrTemp = JSON.parse(JSON.stringify(this.menuArr));
			let pmwidth = parseInt(width - 492 - 139 - 90);
			let menuwidth = parseInt(this.menuArrTemp.join('').length * this.fontWidth + this.menuArrTemp.length * 69);
			this.widthCalc(pmwidth, menuwidth, this.menuArrTemp);
		},
		updataRegularUseMenu(obj) {
			// 更新常用菜单
			let isExist = false;
			for (let i = 0; i < this.regularUseMenu.length; i++) {
				let item = this.regularUseMenu[i];
				if (item.menuUrl === obj.menuUrl) {
					isExist = true;
				}
			}
			if (isExist) {
				return false;
			}
			if (this.regularUseMenu.length > 5) {
				this.regularUseMenu = this.regularUseMenu.slice(0, 4);
			}
			this.regularUseMenu.unshift(obj);
			localStorage.setItem('ziyunRegularUseMenu', JSON.stringify(this.regularUseMenu));
		},
		moreSelect(index) {
			if (this.showMenuNum !== 0) {
				let lastIndex = this.showMenuNum - 1; // 一级菜单最后一个菜单下标
				let exchangeIndex = this.showMenuNum + Number(index); // 要交换的菜单下标
				let temp = this.menuData[lastIndex];
				Vue.set(this.menuData, lastIndex, this.menuData[exchangeIndex]);
				Vue.set(this.menuData, exchangeIndex, temp);
				localStorage.setItem('ziyunPortalMenu', JSON.stringify(this.menuData));
				this.selectfirstMenu(lastIndex, this.menuData[lastIndex]);
			} else {
				localStorage.setItem('ziyunPortalMenu', JSON.stringify(this.menuData));
				this.selectfirstMenu(index, this.menuData[index]);
			}
		},
		systemoperation(name) {
			if (name === 'editPassword') {
				//跳转修改密码
				this.$refs.passwordRefs.isDialog = true;
			} else {
				//跳转登录页
				// window.localStorage.removeItem('ziyunMenuFirstLevel')
				// window.localStorage.removeItem('ziyunMenuSecondLevel')
				// window.localStorage.removeItem('ziyunMenuthirdLevel')
				window.localStorage.removeItem('ziyunFactoryPortalToken');
				if (navigator.userAgent.indexOf('MSIE') > 0) {
					// close IE
					if (navigator.userAgent.indexOf('MSIE 6.0') > 0) {
						window.opener = null;
						window.close();
					} else {
						window.open('', '_top');
						window.top.close();
					}
				} else {
					// close chrome;It is effective when it is only one.
					window.opener = null;
					window.open('', '_self');
					window.close();
				}
			}
		},
		logOut() {
			window.localStorage.removeItem('ziyunFactoryPortalToken');
			window.localStorage.removeItem('isAdmin');
			this.$router.push({ path: '/' });
		},
	},
	computed: {
		moreMenu: function () {
			if (this.menuData.length > this.showMenuNum) {
				return this.menuData.slice(this.showMenuNum, this.menuData.length);
			} else {
				return [];
			}
		},
		showfirstMenu: function () {
			if (this.menuData.length > this.showMenuNum) {
				return this.menuData.slice(0, this.showMenuNum);
			} else {
				return this.menuData;
			}
		},
	},
	watch: {
		animate: function (val) {
			store.commit('menuScale', val);
		},
		$route: function () {
			// this.animate = false
			if (this.menuData.length > 0) {
				this.initMenu();
				this.generateCurrentLocation();
			}
			setTimeout(function () {
				let zyCon = document.querySelector('.zy-content');
				let currLocation = document.querySelector('.currentLocation');
				if (zyCon && currLocation && this.animate) {
					currLocation.classList.add('zy-currentLocation');
					currLocation.classList.remove('currentLocationAnimateBack');
				} else if (currLocation && this.animate) {
					currLocation.classList.remove('zy-currentLocation');
					currLocation.classList.add('currentLocationAnimateBack');
				}
			}, 500);
		},
		secondMenu: function (data) {
			if (data.length === 0) {
				// 不存在二级菜单时，全屏展示
				let zyCon = document.querySelector('.zy-content');
				let currentLoca = document.querySelector('.zy-currentLocation');
				if (zyCon) {
					zyCon.classList.add('conAnimateBack');
				}
				if (currentLoca) {
					currentLoca.classList.add('currentLocationAnimateBack');
				}
			} else {
				let zyCon = document.querySelector('.zy-content');
				let currentLoca = document.querySelector('.zy-currentLocation');
				if (this.animate) {
					if (zyCon) {
						zyCon.classList.add('conAnimateBack');
					}
					if (currentLoca) {
						currentLoca.classList.add('currentLocationAnimateBack');
					}
				} else {
					if (zyCon) {
						zyCon.classList.remove('conAnimateBack');
					}
					if (currentLoca) {
						currentLoca.classList.remove('currentLocationAnimateBack');
					}
				}
			}
		},
	},
};
</script>
<style scoped lang="scss">
.zyCommonWrapper {
	.zyHeaderWrapper {
		height: 60px;
		.zyHeader {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 60px;
			background: rgb(0, 117, 193);
			// padding-left: 25px;
			background-size: contain;
			background-repeat: repeat-x;
			z-index: 1000;
			.rightInfo {
				float: right;
				height: 46px;
				line-height: 46px;
				background: url('~images/commonHeader/rightBg.png') no-repeat;
				background-size: 100% 100%;
				margin-top: 14px;
				// padding-left: 40px;
				.item {
					display: block;
					cursor: pointer;
					color: #f3fbff;
					float: left;
					margin: 0;
					&.leftBorder {
						.con {
							border-left: 1px solid rgba(255, 255, 255, 0.3);
						}
					}
					i {
						display: inline-block;
						vertical-align: middle;
						margin-right: 5px;
					}
					.con {
						display: inline-block;
						vertical-align: middle;
						font-size: 14px;
						line-height: 15px;
						padding: 0 17px;
						height: 15px;
						position: relative;
						border-right: 1px solid rgba(255, 255, 255, 0.3);
					}
				}
				.news {
					width: 20px;
					height: 20px;
					text-align: center;
					line-height: 20px;
					border-radius: 50%;
					background-color: #f14033;
					display: inline-block;
					position: absolute;
					top: -10px;
					right: 2px;
					font-size: 12px;
					font-weight: normal;
					color: #ffffff;
				}
				.historyItem {
					display: block;
					cursor: pointer;
					color: #f3fbff;
					float: left;
					margin: 0 17px;
					line-height: 46px;
					height: 46px;
					padding: 0;
					&:hover {
						.down {
							transform: rotate(180deg);
						}
					}
					i {
						display: inline-block;
						vertical-align: middle;
					}
					.con {
						display: inline-block;
						margin: 0 5px;
						font-size: 14px;
						vertical-align: middle;
					}
					.userImg {
						display: inline-block;
						width: 34px;
						height: 34px;
						border-radius: 50%;
						background: url('~images/commonHeader/defaultuser.png');
						background-size: contain;
						vertical-align: middle;
					}
					.leftIcon {
						font-size: 26px;
					}
				}
			}
			.logo {
				display: inline-block;
				width: 122px;
				height: 60px;
				// margin-top: 15px;
				float: left;
				position: relative;
				.logoBox {
					display: inline-block;
					width: 230px;
					img {
						width: 100%;
					}
				}
				// background: url('~images/logo.png');
				img {
					// margin: 6px 14px;
				}
				a {
					display: inline-block;
					width: 100%;
					height: 100%;
					text-indent: -1000px;
				}
				.down {
					position: absolute;
					bottom: -18px;
					left: 0;
					width: 112px;
					height: 18px;
					overflow: hidden;
					.reflection {
						width: 100%;
						height: 30px;
						-webkit-transform: scaleY(-1);
						-moz-transform: scaleY(-1);
						-ms-transform: scaleY(-1);
						-o-transform: scaleY(-1);
						transform: scaleY(-1);
						opacity: 0.2;
						filter: alpha(opacity= '20');
					}
				}
			}
			.fistMenu {
				display: block;
				margin-left: 230px;
				// margin-right: 512px;
				span {
					font-size: 16px;
					//font-family: 'MicrosoftYaHei, 微软雅黑';
					vertical-align: middle;
				}
				.item {
					display: block;
					cursor: pointer;
					color: #f3fbff;
					float: left;
					margin: 0 18px;
					line-height: 60px;
					height: 60px;
					padding: 0;
					position: relative;
					&.active {
						&:after {
							display: block;
							content: '';
							height: 2px;
							width: 100%;
							position: absolute;
							left: 0;
							bottom: 5px;
							background: #fff;
						}
					}
					i {
						display: inline-block;
						vertical-align: middle;
						margin-right: 5px;
						font-size: 28px;
					}
					.con {
						display: inline-block;
						vertical-align: middle;
					}
				}
				.moreItem {
					display: block;
					cursor: pointer;
					color: #f3fbff;
					float: left;
					margin: 0 20px;
					line-height: 60px;
					height: 60px;
					padding: 0;
					&:hover {
						.down {
							transform: rotate(180deg);
						}
					}
					.leftIcon {
						display: inline-block;
						vertical-align: middle;
						font-size: 26px;
					}
					.con {
						display: inline-block;
						margin: 0 5px;
						vertical-align: middle;
					}
					.down {
						font-size: 22px;
						vertical-align: middle;
					}
					.list {
						.con {
							min-width: 110px;
							text-overflow: ellipsis;
							overflow: hidden;
							margin: 0 10px;
							white-space: nowrap;
						}
						.rightIcon {
							font-size: 16px;
						}
						.leftIcon {
							font-size: 26px;
						}
					}
				}
			}
		}
	}
	.zySidebarWrapper {
		position: fixed;
		z-index: 100;
		left: 0;
		top: 60px;
		bottom: 0;
		width: 230px;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
		padding-bottom: 32px;
		transition: all 0.5s ease;
		-moz-transition: all 0.5s ease; /* Firefox 4 */
		-webkit-transition: all 0.5s ease; /* Safari and Chrome */
		-o-transition: all 0.5s ease; /* Opera */
		//background: #192c4d;
		.zySidebar {
			height: 100%;
			transition: all 0.5s ease;
			-moz-transition: all 0.5s ease; /* Firefox 4 */
			-webkit-transition: all 0.5s ease; /* Safari and Chrome */
			-o-transition: all 0.5s ease; /* Opera */
			transform: translateX(0);
			opacity: 1;
			overflow-y: auto;
			.ivu-progress {
				position: fixed;
				bottom: 1%;
			}
			.progressTitle {
				text-align: center;
				position: fixed;
				bottom: 3%;
				margin-left: 45px;
			}
			.subItem {
				height: 50px;
				line-height: 50px;
				cursor: pointer;
				overflow: hidden;
				.content {
					padding: 0 16px 0 26px;
					display: block;
					color: #333333;
					height: 50px;
					line-height: 50px;
					i {
						display: inline-block;
						vertical-align: middle;
						color: #b2b2b2;
					}
					.iconLeft {
						color: #888e97;
						font-size: 22px;
						display: inline-block;
						width: 30px;
						line-height: 30px;
						height: 30px;
						text-align: center;
						border-radius: 50%;
					}
					.arrow {
						color: #999999;
						font-size: 14px;
					}
					.con {
						display: inline-block;
						vertical-align: middle;
						width: 120px;
						color: #333333;
						overflow: hidden;
						margin-left: 10px;
						font-size: 16px;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				.childMenu {
					display: block;
					li {
						height: 35px;
						line-height: 35px;
						color: #7f8f9d;
						padding-left: 57px;
						font-size: 14px;
						position: relative;
						&.active {
							color: #1c82f9;
							background-color: rgba(21, 126, 249, 0.1);
							&:after {
								display: block;
								content: '';
								width: 3px;
								height: 35px;
								background-color: #157ef9;
								position: absolute;
								left: 0;
								top: 0;
							}
						}
						.thirdItem {
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							display: inline-block;
							width: 100%;
						}
					}
				}
				&.active {
					.content {
						.iconLeft {
						}
						i,
						.con {
							color: #1c82f9;
						}
					}
				}
				&.open {
					height: auto;
					.arrow {
						transform: rotate(90deg);
					}
				}
			}
		}
		.zyMinSidebar {
			position: absolute;
			top: 0;
			bottom: 32px;
			left: -55px;
			transition: all 0.5s ease;
			-moz-transition: all 0.5s ease; /* Firefox 4 */
			-webkit-transition: all 0.5s ease; /* Safari and Chrome */
			-o-transition: all 0.5s ease; /* Opera */
			.describe {
				display: none;
			}
			.iconWrap {
				width: 55px;
				display: block;
				position: relative;
				left: 0;
				top: 0;
				text-align: center;
				height: 50px;
				line-height: 50px;
				cursor: pointer;
				color: #888e97;
				i {
					font-size: 20px;
				}
				.describe {
					position: absolute;
					right: 0;
					top: 0;
					transform: translateX(100%);
					min-width: 220px;
					background: url('~images/commonHeader/activeBg.png') no-repeat;
					background-size: 100% 100%;
					height: 50px;
					line-height: 50px;
					text-indent: 20px;
					color: #fff;
					white-space: nowrap;
					border-radius: 3px;
					display: none;
					padding: 0 30px;
					text-align: left;
					font-size: 16px;
				}

				&.active {
					background-color: rgba(24, 123, 219, 0.2);
					position: relative;
					color: #157ef9;
					&:after {
						display: block;
						content: '';
						width: 5px;
						height: 50px;
						background-color: #187bdb;
						position: absolute;
						left: 0;
						top: 0;
					}
				}
			}
		}
		.shrinkBtn {
			background-color: rgba(24, 123, 219, 0.1);
			box-shadow: 0px 0px 5px 0px rgba(51, 51, 51, 0.1);
			color: #187bdb;
			border: none;
			outline: none;
		}
	}
	.menuAnimate {
		transition: all 0.5s ease;
		-moz-transition: all 0.5s ease; /* Firefox 4 */
		-webkit-transition: all 0.5s ease; /* Safari and Chrome */
		-o-transition: all 0.5s ease; /* Opera */
		width: 55px;
		.zySidebar {
			transition: all 0.5s ease;
			-moz-transition: all 0.5s ease; /* Firefox 4 */
			-webkit-transition: all 0.5s ease; /* Safari and Chrome */
			-o-transition: all 0.5s ease; /* Opera */
			transform: translateX(-200px);
			opacity: 0;
		}
		.zyMinSidebar {
			left: 0;
			transition: all 0.5s ease;
			-moz-transition: all 0.5s ease; /* Firefox 4 */
			-webkit-transition: all 0.5s ease; /* Safari and Chrome */
			-o-transition: all 0.5s ease; /* Opera */
			.iconWrap {
				&:hover {
					.describe {
						display: block;
						i {
							color: #fff;
						}
					}
				}
			}
		}
	}
	.currentLocation {
		width: 1240px;
		min-height: 18px;
		color: #a0a0a0;
		line-height: 18px;
		margin: 0 auto;
		padding: 15px 0;
		.item {
			display: inline-block;
			vertical-align: middle;
		}
		i {
			font-size: 18px;
			margin-right: 5px;
		}
		em {
			color: #999999;
			font-size: 12px;
			font-weight: normal;
			vertical-align: middle;
		}
		span {
			a {
				font-size: 12px;
				color: #555;
				margin: 0 12px;
			}
		}
		.currentPageLocation {
			color: #2cb1fb !important;
		}
	}
	.zy-currentLocation {
		margin: 0 20px 0 250px;
		transition: all 0.5s ease;
		-moz-transition: all 0.5s ease; /* Firefox 4 */
		-webkit-transition: all 0.5s ease; /* Safari and Chrome */
		-o-transition: all 0.5s ease; /* Opera */
		width: auto !important;
	}
	.currentLocationAnimateBack {
		margin: 0 20px 0 80px;
		transition: all 0.5s ease;
		-moz-transition: all 0.5s ease; /* Firefox 4 */
		-webkit-transition: all 0.5s ease; /* Safari and Chrome */
		-o-transition: all 0.5s ease; /* Opera */
	}
}
</style>

<style lang="scss">
.notice {
	font-size: 25px !important;
	position: relative;
	span {
		position: absolute;
		color: #ffffff;
		font-size: 9px;
		text-align: center;
		line-height: 14px;
		top: 30%;
		right: -8%;
		border-radius: 50%;
		background-color: red;
		min-width: 14px;
		height: 14px;
	}
}
.zyCommonWrapper {
	.moreItem {
		.ivu-select-dropdown {
			margin: -10px 0 5px 0;
			&::after {
				display: block;
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				top: -10px;
				left: 50%;
				border-width: 0 10px 10px 10px;
				transform: translateX(-50%);
				border-style: solid;
				border-color: transparent transparent #fff transparent;
			}
		}
	}
	.rightInfo {
		.ivu-select-dropdown {
			margin: -5px 0 5px 0;
			max-height: 1000px !important;
			&::after {
				display: block;
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				top: -10px;
				left: 50%;
				border-width: 0 10px 10px 10px;
				transform: translateX(-50%);
				border-style: solid;
				border-color: transparent transparent #fff transparent;
			}
		}
	}
}
</style>
